/**
 * Created by xiaoz on 16/8/13.
 */
define(["utils","base"],function(utils,baseClass){
    function Component(config){
        var _this = this;


        var className = "displayflex yy-view";
        if(config.style){
          if(!config.style["alignItems"]&&!config.style["align-items"]){
            className+= " yy-ai-stretch";
          }
          if(!config.style["justifyContent"]&&!config.style["justify-content"]){
            className+= " yy-jc-flex-start";
          }
          if(!config.style["flexDirection"]&&!config.style["flex-direction"]){
            className+= " yy-fd-column";
          }
        }

        Component.baseConstructor.call(this,config);

        _this.isInLoading=false;
        _this.canRefresh = false;
        var pluginPullToRefreshMethodName = this.config.comKey+"_pulltorefresh";
        var pluginLoadMoreMethodName = this.config.comKey+"_loadmore";
        this.pluginPullToRefreshMethod = this.pageview.plugin[pluginPullToRefreshMethodName];
        this.pluginLoadMoreMethod = this.pageview.plugin[pluginLoadMoreMethodName];


        var pluginLoadMoreErrorToReload = this.config.comKey+"_reload";
        this.pluginLoadMoreErrorToReloadMethod = this.pageview.plugin[pluginLoadMoreErrorToReload];

        if(this.pluginPullToRefreshMethod){
          this.innerWrapper = $("<div class='"+className+"'></div>");
          this.$$childrenWrapper = this.innerWrapper;
          this._initLoadFirstErrorDom();
          this.$el.append(this.innerWrapper);
        }
        this.LoadMoreOffsetBottom = utils.getRealHeight(120);


        this.$el.addClass(className);
        config.root = config.root || [];

        this._initTouchEvent();

        this.initLayout(config.$$datasource,null,this.rowInstance,function(){
          _this.childInitOver();
        });


    }
    utils.extends(Component,baseClass);

    Component.prototype._initPullToRefreshDom = function(){
      var height = utils.getRealHeight(180);
      var fontSize =  utils.getRealWidth(11);
      var iconSize =  utils.getRealWidth(15);
      this.pullLimitHeight = utils.getRealHeight(40);
      this.pullToRefreshWrapper = $("<div style='height:"+height+"px;margin-top:-"+height+"px' class='yy-pull-wrapper'></div>");
      this.pullMessWrapper = $("<div style='height:"+this.pullLimitHeight+"px' class='displayflex yy-jc-center yy-ai-center flex-h yy-pull-mes-wrapper'></div>");
      this.pullArrowIcon =  $("<i style='font-size:"+iconSize+"px' class='yy-pull-arrow'></i>");
      this.pullMesLabel =  $("<span style='font-size:"+fontSize+"px' class='yy-pull-meslabel'>下拉刷新</span>");
      var pullLoadingIcon = $("<div class='preloader yy-pull-loadingicon'></div>");
      this.pullMessWrapper.append(pullLoadingIcon).append(this.pullArrowIcon).append(this.pullMesLabel).appendTo(this.pullToRefreshWrapper);
      this.innerWrapper.append(this.pullToRefreshWrapper);
    }

    Component.prototype._initLoadMoreDom = function(){
      var height = utils.getRealHeight(36);
      var fontSize =  utils.getRealWidth(11);
      this.LoadMoreWrapper = $("<div style='height:"+height+"px' class='yy-loadmore-wrapper displayflex yy-jc-center yy-ai-center flex-h displaynone'></div>");
      var loadMoreIcon = $("<div class='preloader yy-loadmore-loadingicon'></div>");
      this.loadMoreLabel =  $("<span style='font-size:"+fontSize+"px' class='yy-pull-meslabel'>正在加载</span>");
      this.LoadMoreWrapper.append(loadMoreIcon).append(this.loadMoreLabel );
      this.$el.append(this.LoadMoreWrapper);
    }

    Component.prototype._initLoadMoreErrorDom = function(){
      var _this = this;
      var height = utils.getRealHeight(42);
      var fontSize =  utils.getRealWidth(11);
      var iconSize =  utils.getRealWidth(15);
      this.LoadMoreErrorWrapper = $("<div style='height:"+height+"px' class='yy-loadmore-wrapper displayflex yy-jc-center yy-ai-center flex-h displaynone'></div>");
      var loadMoreerrorIcon = $("<i style='font-size:"+iconSize+"px' class='yy-icommon yy-loadmore-erroricon'></i>");
      this.loadErrorLabel =  $("<span style='font-size:"+fontSize+"px' class='yy-pull-meslabel'>网络异常,点击</span>");
      var reloadLabel = $("<span style='font-size:"+fontSize+"px' class='yy-loadmore-reload-babel'>重新加载</span>");
      reloadLabel.bind("click",function(){
        _this.pluginLoadMoreErrorToReloadMethod &&_this.pluginLoadMoreErrorToReloadMethod.call(_this.pageview.plugin,_this,{});
      });
      this.LoadMoreErrorWrapper.append(loadMoreerrorIcon).append(this.loadErrorLabel).append(reloadLabel);
      this.$el.append(this.LoadMoreErrorWrapper);
    }

    Component.prototype._initLoadFirstErrorDom = function(){
      var _this = this;
      var height = utils.getRealHeight(36);
      var fontSize =  utils.getRealWidth(11);
      var iconSize =  utils.getRealWidth(15);
      this.LoadFirstErrorWrapper = $("<div data-mark='loadfirsterror' style='height:"+height+"px' class='yy-loadfirsterror-wrapper displayflex yy-jc-center yy-ai-center flex-h displaynone'></div>");
      var loadFirsterrorIcon = $("<i style='font-size:"+iconSize+"px' class='yy-icommon yy-loadmore-erroricon'></i>");
      this.loadFirstErrorLabel =  $("<span style='font-size:"+fontSize+"px' class='yy-pull-meslabel'>网络异常,尝试再次下拉刷新</span>");
      this.LoadFirstErrorWrapper.append(loadFirsterrorIcon).append(this.loadFirstErrorLabel);
      this.$el.append(this.LoadFirstErrorWrapper);
    }

    Component.prototype._initTouchEvent=function(){
      var _this = this;
      if(this.pluginPullToRefreshMethod){
        var startY = 0,startScrollTop;;
        this._initPullToRefreshDom();
        this.$el.bind("touchstart",function(e){
          if(_this.isInLoading){return;}
          _this.isInLoading = false;
          _this.canRefresh = false;
          var touch = e.touches[0];
          startY = touch.pageY;
          startScrollTop = _this.$el.scrollTop();
        });

        this.$el.bind("touchmove",function(e){
          if(_this.isInLoading){return;}
          var touch = e.touches[0];
          var curY = touch.pageY;
          var diff = curY-startY;
          if(diff>0){
            var scrollTop = _this.$el.scrollTop();
            if(scrollTop <=0){
              _this.$el.css({"overflow":"hidden"});
              e.preventDefault();
              e.stopPropagation();
              var pullOffsetY = diff-startScrollTop;
              if(pullOffsetY>_this.pullLimitHeight*4){
                _this.pullMesLabel.html("释放更新");
                _this.pullToRefreshWrapper[0].className = "yy-pull-wrapper yy-release-refresh";
                _this.canRefresh = true;
              }else{
                _this.pullMesLabel.html("下拉刷新");
                _this.pullToRefreshWrapper[0].className = "yy-pull-wrapper yy-push-refresh";
                _this.canRefresh = false;
              }
              _this.innerWrapper.css(
                utils.processTransitionTanformStyle("none","translate3d(0,"+(pullOffsetY/3)+"px,0)")
              );
            }
          }

        });

        this.$el.bind("touchend",function(e){
          _this.$el.css({"overflow-y":"auto"});
          if(_this.isInLoading){return;}
          if(_this.canRefresh){
            _this.setPullLoadingState();
            _this.pluginPullToRefreshMethod && _this.pluginPullToRefreshMethod.call(_this.pageview.plugin,_this,{});
          }else{
            _this.resetPullLoadState();
          }
        });

      }

    }

    Component.prototype.childInitOver = function(){
      var _this = this;
      if(this.pluginLoadMoreMethod){
        this._initLoadMoreDom();
        this._initLoadMoreErrorDom();
        var scrollTimeId = null;
        this.$el.bind("scroll",function(e){
          if(scrollTimeId){window.clearTimeout(scrollTimeId)}
          scrollTimeId = window.setTimeout(function(){
            _this._onScroll(e);
          },80);
        });
      }
    };
    Component.prototype.setPullLoadingState = function(){
      var _this = this;

      if(!_this.pullMesLabel){return;}
      _this.isInLoading = true;
      _this.LoadMoreErrorWrapper&&_this.LoadMoreErrorWrapper.addClass("displaynone");
      _this.LoadFirstErrorWrapper.addClass("displaynone");
      _this.pullMesLabel.html("正在加载");
      _this.pullToRefreshWrapper[0].className = "yy-pull-wrapper yy-push-refreshing";
      _this.innerWrapper.css(
        utils.processTransitionTanformStyle("transform .2s ease","translate3d(0,"+_this.pullLimitHeight+"px,0)")
      );

    }
    Component.prototype.resetPullLoadState = function(){
      var _this = this;
      if(!_this.pullMesLabel){return;}
      _this.isInLoading = false;
      _this.canRefresh = false;
      // _this.LoadFirstErrorWrapper.addClass("displaynone");
      _this.pullMesLabel.html("下拉刷新");
      _this.pullToRefreshWrapper[0].className = "yy-pull-wrapper yy-push-refresh";
      _this.innerWrapper.css(
        utils.processTransitionTanformStyle("transform .3s ease","translate3d(0,0,0)")
      );
    }

    Component.prototype.setLoadFirstError = function(){
      this.LoadFirstErrorWrapper&&this.LoadFirstErrorWrapper.removeClass("displaynone");
      this.resetPullLoadState();
    }

    Component.prototype.setCanLoadMore = function(arg){
      if(!this.loadMoreLabel){
        return;
      }
      if(arg&&arg.isReload){
        this.canLoadMore = false;
      }else{
        this.canLoadMore = true;
      }
      this.loadMoreLabel.html("正在加载");
      this.LoadMoreErrorWrapper.addClass("displaynone");
      this.LoadFirstErrorWrapper&&this.LoadFirstErrorWrapper.addClass("displaynone");
      this.LoadMoreWrapper.removeClass("displaynone yy-loaddone");
    }

    Component.prototype.setHasLoadDone = function(){
      if(!this.loadMoreLabel){
        return;
      }
      this.canLoadMore = false;
      this.loadMoreLabel.html("已显示所有数据");
      this.LoadFirstErrorWrapper&&this.LoadFirstErrorWrapper.addClass("displaynone");
      this.LoadMoreErrorWrapper.addClass("displaynone");
      this.LoadMoreWrapper.addClass("yy-loaddone").removeClass("displaynone");
    };

    Component.prototype.setInitLoadMessage = function(){
      if(!this.loadMoreLabel){
        return;
      }
      this.LoadFirstErrorWrapper&&this.LoadFirstErrorWrapper.addClass("displaynone");
      this.LoadMoreErrorWrapper.addClass("displaynone");
      this.LoadMoreWrapper.addClass("yy-loaddone displaynone");
    };

    Component.prototype.setLoadMoreErrorState = function(){
      this.canLoadMore = false;

      this.resetPullLoadState();
      this.LoadMoreWrapper.addClass("displaynone");
      this.LoadMoreErrorWrapper.removeClass("displaynone");
      this.scrollToBottom();
    }

    Component.prototype.scrollToBottom = function(){
      this.$el.scrollTop(this.$el[0].scrollHeight);
    }




    Component.prototype._onScroll = function(e){
      if(!this.canLoadMore){
        return;
      }
      if(this.$el[0].offsetHeight+this.$el.scrollTop()+this.LoadMoreOffsetBottom>=this.$el[0].scrollHeight){
        this.canLoadMore = false;
        this.pluginLoadMoreMethod.call(this.pageview.plugin,this,{});
      }
    }

    return Component;
});
/**
 * Created by xiaoz on 16/8/13.
 */
